//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin header() {
    /* ==========================================================================
       Header

       Default Mendix mobile header
    ========================================================================== */

    .mx-header {
        z-index: 100;
        display: flex;
        width: 100%;
        height: $m-header-height;
        padding: 0;
        text-align: initial;
        color: $m-header-color;
        background-color: $m-header-bg;
        box-shadow: 0px 2px 2px rgba(194, 196, 201, 0.30354);

        // Reset mxui
        div.mx-header-left,
        div.mx-header-right {
            position: relative;
            top: initial;
            right: initial;
            left: initial;
            display: flex;
            align-items: center;
            width: 25%;
            height: 100%;

            .mx-placeholder {
                display: flex;
                align-items: center;
                height: 100%;
            }
        }

        div.mx-header-left .mx-placeholder {
            order: 1;

            .mx-placeholder {
                justify-content: flex-start;
            }
        }

        div.mx-header-center {
            overflow: hidden;
            flex: 1;
            order: 2;
            text-align: center;

            .mx-title {
                overflow: hidden;
                width: 100%;
                margin: 0;
                text-overflow: ellipsis;
                color: $m-header-color;
                font-size: $m-header-title-size;
                line-height: $m-header-height;
            }
        }

        div.mx-header-right {
            order: 3;

            .mx-placeholder {
                justify-content: flex-end;
            }
        }

        // Content magic
        .mx-link {
            display: flex;
            align-items: center;
            height: 100%;
            transition: all 0.2s;
            text-decoration: none;

            .glyphicon,
            .mx-icon-lined,
            .mx-icon-filled {
                top: 0;
                font-size: 23px;
            }

            &:active {
                transform: translateY(1px);
                color: $link-hover-color;
            }
        }

        .mx-link,
        .btn,
        img {
            padding: 0 $spacing-medium;
        }

        .mx-sidebartoggle {
            font-size: 24px;
            line-height: $m-header-height;

            img {
                height: 20px;
            }
        }
    }

    // RTL support
    body[dir="rtl"] {
        .mx-header-left {
            order: 3;
        }

        .mx-header-right {
            order: 1;
        }
    }
}
